<template>
  <div class="graph-table" style="width: 100%;height: 100%;">
    <div class="graph-table-header">
      <div class="header-item one-line">设备</div>
      <div class="header-item one-line">站位</div>
      <div class="header-item one-line">扫描时间</div>
      <div class="header-item one-line">用户</div>
      <div class="header-item one-line">规格</div>
      <div class="header-item one-line">正确编码1</div>
      <div class="header-item one-line">扫入编码</div>
      <div class="header-item one-line">换料数量</div>
    </div>

    <div class="graph-table-row" v-for="item,index in tableData" :key="index" :class="[item.isShowHighLight?'high-light-red':'',index===0?'first-row':'']">
      <div class="row-item two-line">{{item.equipmentName}}</div>
      <div class="row-item two-line">{{item.standPosition}}</div>
      <div class="row-item two-line">{{item.scanTime}}</div>
      <div class="row-item two-line">{{item.username}}</div>
      <div class="row-item two-line">{{item.spec}}</div>
      <div class="row-item two-line">{{item.rightCode1}}</div>
      <div class="row-item two-line">{{item.scanCode}}</div>
      <div class="row-item two-line">{{item.changeQuantity}}</div>
    </div>


  </div>
</template>
<script>


  export default {
    data() {
      return {
        tableData:[]
      }
    },
    created: function () {

    },
    mounted() {

    },

    methods: {
      updateEcharts(tableData){
        this.tableData = tableData
      }
    }
  }

</script>

<style scoped lang="stylus">

  .one-line{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
  }
  .two-line{
    display: -webkit-box;
    word-wrap break-word;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
    .high-light-red{
      background-color rgba(251,144,147,0.1);
      animation-delay: 1s;
      animation-duration: 1s;
      animation-name: box-line-ani;
      animation-direction: alternate;            /*动画交替反向运行*/
      animation-iteration-count: infinite;       /*无限重复*/
      animation-fill-mode: both;
      animation-timing-function: cubic-bezier(.4, .52, .93, .4);
    }

    @keyframes box-line-ani {
      0% {
        background-color rgba(251,144,147,0.1)
      }
      10% {
        background-color rgba(251,144,147,0.4)
      }
      20% {
        background-color rgba(251,144,147,0.8)
      }
      100% {
        background-color: rgba(251,144,147,0.8);

      }
    }
  .graph-table{
    .graph-table-header{
      margin-top 1vh
      display flex
      .header-item{
        width 10%
        margin-right 2.5%
        font-weight 500
      }
    }
    .graph-table-row{

      &.high-light-red{

      }
      &.first-row{
        margin-top 1.2vh
      }
      padding 0.8vh 0.8vh
      display flex
      margin-bottom 0.2vh
      border-radius 4px
      .row-item{
        width 10%
        max-width 10vw
        margin-right 2.5%
      }
    }
  }


</style>
